<template>
    <el-card shadow="always">
        <el-table :data="list" stripe  style="width: 100%" height="450"  @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" />
            <el-table-column label="序号" type="index" width="80" />
            <el-table-column v-for="header in header" :key="header.prop" :width="header.width" :label="header.label" >
                <template #default="{ row }">
                    <span v-if="header.more">{{ row[header.prop][0].role_name }}</span>
                    <span v-else>{{ row[header.prop] ? row[header.prop] : '-' }}</span>
                </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" min-width="140">
                <template #default="scope">
                    <el-button link type="success" size="small" @click="handleEdit(scope.row)" v-if="!scope.row.delete_time">修改</el-button>
                    <el-button link type="danger" size="small" @click="handleDelete(scope.row)" v-if="scope.row.delete_time">恢复</el-button>
                    <el-button link type="primary" size="small" @click="handleDelete(scope.row)" v-else>删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </el-card>
</template>

<script setup lang="ts" name="Table"> 
import { ref, defineProps } from 'vue';
defineProps({
    list: {
        type: Array as any,
        default: () => {[]},
    },

    header: {
        type: Array as any,
        default: () => {[]},
    },
});

const multipleSelection = ref()
const handleSelectionChange = (value:any) => {
    multipleSelection.value = value;
}

const emit = defineEmits(['table']);
const handleEdit = (row: any) => {
    emit('table', row, 'edit');
}
const handleDelete = (row: any) => {
    emit('table', row, 'delete');
}

</script>

<style scoped>
.el-card {
    margin: 20px 0;
    max-height: 496px;
    overflow: hidden;
    overflow-y: scroll;
}

.el-card::-webkit-scrollbar{
    width: 4px;
}

.el-card::-webkit-scrollbar-thumb{
    background:#ccc;
    border-radius:4px;
}
</style>